<template>
  <div>
  <el-row>
    <el-col :span="8">
      <!-- <el-upload
        class="upload-demo"
        :action="action"
        :headers="headers"
        :on-success="handleSuccess"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload> -->
      <el-upload
          class="upload-demo"
          :action="action" 
          multiple
          :headers="headers"
          :http-request="uploadFile"
          ref="upload"
          :file-list="fileList"
          list-type="picture"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取11111111文件</el-button>
      </el-upload>
      
      <el-button type="primary" @click="saveEdit">提交</el-button>
    </el-col>
    <el-col :span="8">
      <!-- <el-upload
        class="upload-demo"
        :action="action"
        :headers="headers"
        :on-success="handleSuccess"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload> -->
      <el-upload
          class="upload-demo"
          :action="actionZip"
          :headers="headers"
          :http-request="uploadFile1"
          ref="upload1"
          :file-list="fileList1"
          accept="zip"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取zip</el-button>
      </el-upload>
      
      <el-button type="primary" @click="saveEdit1">提交</el-button>
    </el-col>
    
  </el-row>
      <div v-if="contentList.length">
        <div v-for="(me,index) in contentList" :key="index" class="text item" @click="GoTo(me.id,me.author)">
        {{ me.bookname }}
        <p style="color:#999;">{{me.username}}</p>
        <p style="color:#07aefc;">{{me.content}}</p>
      </div>
      </div>
      <div v-else>暂无发表^^</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      sumList: 0,
      contentList: [],
      activeIndex2: '1',
      queryPames:{
        pageNum:1,
        pageSize:10
      },
      action:this.$url+'/upload/img',
      actionZip:this.$url+'/upload/zip',
      fileList:[],
      headers:{
        Authorization:localStorage.getItem('token')
      },
      formList:[],
      fileList1:[],
    }
  },
  created(){
    this.$ajax({
      method:'get',
      url:this.$url+'/info',
      headers:{
        Authorization:localStorage.getItem('token')
      },
    }).then(response=>{
      let res = JSON.parse(response.request.response)
      if(res.errorCode==101){
        //说明此刻没登录
        this.$router.push({path:'login'})
      }else{
        localStorage.setItem('username',res.data[0].username)
      }
    })
  },
  mounted () {
    this.GetList()
  },
  methods: {
    saveEdit(){
      this.$refs['upload'].submit();
      let formData = new FormData();
      for (let i = 0; i < this.fileList.length; i++) {
          formData.append('file', this.fileList[i]);//循环添加到formData，传给后端
      }
      this.$ajax({
        method:'post',
        url:this.$url+'/upload/img',
        headers:{
          Authorization:localStorage.getItem('token')
        },
        data:formData
      }).then(response=>{
        console.log(response)
      })
      this.fileList=[] //上传成功清空fileList
    },
    saveEdit1(){
      this.$refs['upload1'].submit();
      let formData = new FormData();
      for (let i = 0; i < this.fileList1.length; i++) {
          formData.append('file', this.fileList1[i]);//循环添加到formData，传给后端
      }
      this.$ajax({
        method:'post',
        url:this.$url+'/upload/zip',
        headers:{
          Authorization:localStorage.getItem('token')
        },
        data:formData
      }).then(response=>{
        console.log(response)
      })
      this.fileList1=[] //上传成功清空fileList
    },
    uploadFile(file) {
      this.fileList.push(file.file);//取到选取的文件
    },
    uploadFile1(file) {
      this.fileList1.push(file.file);//取到选取的文件
    },
    handleSuccess(file){
      console.log(file.response.data)
      this.formList.push(file.response.data)
    },
    GetList () {
      this.$ajax({
        method: 'get',
        url: this.$url+'/list',
        headers:{
          Authorization:localStorage.getItem('token')
        },
        params: {
          ...this.queryPames
        }
      })
        .then(response => {
          let res = JSON.parse(response.request.response)
          if(res.errorCode==101){
            //说明此刻没登录
            this.$router.push({path:'login'})
          }else{
            res.data.length&&res.data.forEach((value, index) => {
              this.contentList.push(value)
            })
          }

        })
        .catch(error => {
          console.log(error)
        })
    },
    GoTo (id, author) {
      this.$router.push({ path: 'detail', query: { id: id, author: author } })
    }
  }
}
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  padding: 8px 0;
  text-align: left;
  display:flex;
  justify-content: space-between;
}
</style>
